<template>
  <div style="width:100%;height:100%;">
    <el-row>
      <el-col :span="12">
        <div id="charts01"></div>
      </el-col>
      <el-col :span="12">
        <div ref="chartsToolBox" class="charts03"></div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24"  style="width: 100%;">
        <!--   指定宽度 style="width: 100%;"-->
        <div id="charts02" ref="charts02" style="width: 100%;"></div>
      </el-col>
    </el-row>
  </div>

</template>

<script setup>
import * as echarts from 'echarts'
import { onMounted ,onUnmounted,reactive,ref} from 'vue'
import { getDataLook } from '../../api/dataLook'
import dayjs from "dayjs";

// 图表2的选项，是一个响应式对象，方便修改
let options2 = reactive({
  title: {
    text: '每日用餐人数趋势',
    subtext: '动态加载数据-铺满容器(grid)-显示所有标签(axisLabel)'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    // data: ['销量', '金额']
    data:[]
  },
  // grid（网格）是 ECharts 中用于定义直角坐标系绘图区域的组件。
  // 核心作用
  /*确定绘图区域范围: 它定义了图表主体（如折线、柱子）实际渲染的矩形区域。
  管理坐标轴位置: X 轴和 Y 轴就是沿着 grid 的边缘绘制的。
  */
  // 1.解决“宽度没有铺满”的根本方案
  grid: {
    left: '3%',     // 左侧距离容器的百分比
    right: '4%',    // 右侧距离容器的百分比
    containLabel: true // 包含坐标轴的刻度标签，避免被截断
  },
  xAxis: {
    // data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    data:[],
    // 2.显示所有标签，不跳过，旋转标签，解决标签过长时显示不全的问题
    axisLabel: {
      // 1. 强制显示所有标签（不跳过）
      interval: 0,
      // 2. 旋转标签，度数根据实际情况调整 (如 30, 45, 60, 90)
      rotate: 45,
      // 3. (可选) 设置最大宽度和溢出策略，适用于标签很长的情况
      // overflow: 'truncate', // 截断
      // width: 80 // 最大宽度
    }
  },
  yAxis: {},
  series: [
    // {
    //  name: '销量',
    //  type: 'bar',
    //  data: [5, 20, 36, 10, 10,]
    // }
  ]
})
const charts02 = ref(null)

// 图表3的选项，是一个响应式对象，方便修改
let charts03 = null; //echarts对象实例
let options3 = reactive(
    {
      title:{
        text:"周粉丝增长情况",
        subtext:"工具栏目(toolbox)、一张表多种类型(line,bar)"
      },
      toolbox:{
        show: true,
        feature: {
          saveAsImage: {
            show: true,
            title: '保存为图片'
          },
          restore: {
            show: true,
            title: '还原'
          }
        }
      },
      tooltip:{
        triggerEvent:"axis"
      },
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line',
          smooth: true
        },
        {
          data: [620, 732, 701, 734, 290, 530, 1020],
          type: 'bar',
          smooth: true
        }
      ]
    }
)
// 通过ref取dom
const chartsToolBox = ref(null)
// 创建一个方法，用来初始化图表3
const initChartsToolBoxCharts = () => {
  charts03 = echarts.init(chartsToolBox.value);
  charts03.setOption(options3)
}

// DOM 挂载后初始化图表
onMounted(async () => {
  // 图表1:最简单的方式，直接在Mounted中初始化图表--不推荐
  const charts01Node =document.getElementById('charts01')
  let myChart = echarts.init(charts01Node);

  const options = {
    title: {
      text: 'ECharts 入门示例',
      subtext: '基础概念：x轴-y轴-数据集-提示工具-折线图-自定义样式-柱状图-多条数据'
    },
    tooltip: {
      trigger: 'axis'
    },
    // 图例:要跟series的name对应
    legend: {
      data: ['销量', '金额']
    },
    xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [{
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    },
      {
        name: '金额',
        type: 'bar',
        data: [15, 30, 46, 20, 20, 30]
      },
      {
        name: '业绩排名',
        type: 'line',
        data: [15, 30, 46, 20, 20, 30],
        // 美化折线
        // 是否平滑曲线
        smooth: true,
        // 折线连接点样式
        symbol: 'circle',
        symbolSize: 10,
        // 线条样式
        lineStyle: {
          color: 'skyblue',
          width: 2,
          type: 'dashed'
        },
        // 开启面积图
        areaStyle: {
          color: 'skyblue',
          opacity: 0.5
        }
      }
    ]
  }
  myChart.setOption(options)

  // 第2张图表
  // 传统js获取节点
  // const charts02Node =document.getElementById('charts02')
  // const myChart2 = echarts.init(charts02Node);
  // Vue中使用 ref 获取节点 - 推荐
  const charts02Node = charts02.value
  let myChart2 = echarts.init(charts02Node);

  // 2.1 从接口加载动态数据
  let data = {
    startDate: '2025-10-01',
    endDate: '2025-12-31'
  }
  const result = await getDataLook(data)

  // 2.2 如果后端给的数据 与前端的数据结构不一致，则需要处理
  // 格式化时间-尽可能让后端处理好，前前只显示
  let xRaw = result.data.xAxisData||[]
  let xData = xRaw.map(item=>{
    return dayjs(item).format('YYYY-MM-DD')
  })

  // options2.xAxis.data = result.data.xAxisData //x轴数据
  options2.xAxis.data = xData
  options2.series = result.data.series        //y轴数据
  options2.legend.data = [result.data.series[0].name,result.data.series[1].name]

  myChart2.setOption(options2)

  // 3.第3张图表
  initChartsToolBoxCharts()

  // 监听窗口大小变化，
  window.onresize = () => {
    // 自动适应窗口大小
    myChart.resize()
    myChart2.resize()
    charts03.resize()
  }

  //
  onUnmounted(() => {
    // 注销监听
    window.onresize = null

    //  卸载图表
    myChart.dispose()
    myChart2.dispose()
    charts03.dispose()

    //销毁echarts实例
    myChart = null
    myChart2 = null
    charts03 = null
  })
})
</script>

<style scoped lang="less">
#charts01,#charts02,.charts03 {
  width: 100%;
  height: 500px;
}
</style>